<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" name="input" v-model="myTest">
    <button @click="addButton()">Add</button>
    <ul v-show="todoList.length">
        <li v-for="(item, index) in todoList">
            {{item}}&emsp;--{{index}}
            <button @click="delHander(index)">Del</button>
        </li>
    </ul>

    <div v-show="!todoList.length">
        温馨提示！ 待做事已清零！
    </div>


</div>
    <script>
        new Vue({
            el: "#app",
            data:{
                todoList: ["123", "234", "345"],
                myTest: "",
            },
            methods: {
                addButton(){
                    console.log(this.myTest);
                    this.todoList.push(this.myTest);
                    this.myTest="";
                },
                delHander(index){
                    this.todoList.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>